<template>
  <div class="panda">
    <p>熊猫</p>
    <div>
      <input type="text" v-model="panda.name" placeholder="名称">
      <input type="text" v-model="panda.age" placeholder="年龄">
    </div>
    <ul>
      <li>name: {{ panda.name }}</li>
      <li>age: {{ panda.age }}</li>
    </ul>
  </div>
</template>

<script>
// 从 vue 模块中导入 reactive 、getCurrentInstance 函数
import { 
  reactive,
  getCurrentInstance
} from 'vue';

// 从 vue 模块中导入 用于在 "组合式API" 中绑定生命周期钩子的函数
import { 
  onBeforeMount , 
  onMounted 
} from 'vue';

export default {
  // 在 "选项式API" 中使用 setup 函数: 在组件被创建之前，props 被解析之后执行。它是 "组合式API" 的入口
  setup(props,context){
    console.log( '- - - setup - - -');
    // 在 setup 中还不能通过 this 来访问当前组件，因为 组件尚未被创建！
    console.log( 'props: ' , props );
    console.log( 'context: ' , context );

    // 注册生命周期钩子
    onBeforeMount( () => console.log( '- - - before mount - - -') );
    onMounted( () => { 
      console.log( '- - - mounted - - -' ); 
      let self = getCurrentInstance(); // 获得当前组件
      console.log( self );
    });

    // 使用 reactive 将 "非响应式数据" 包裹成 "响应式数据"
    const panda = reactive( { name: '大美' , age: 6 } );
    console.log( panda );
    // 最后返回的对象中的属性可以在模板上直接使用
    return {
      panda
    }
  },
  // 生命周期钩子
  beforeCreate(){
    console.log( '- - - before create - - -' );
  },
  created(){
    console.log( '- - - created - - -' );
  }
}
</script>

<style scoped>
.panda {
  margin: 15px;
  border: 1px solid #dedede;
  box-shadow: 0 0 20px -10px blue;
}
</style>